<template>
    <div><Finger/></div>
    <el-space direction="vertical" alignment="flex-start" class="con_one">
            <el-button @click="setLoading">
                {{loading === true?'显示图片':'显示骨架屏'}}
            </el-button>
            <el-skeleton :loading="loading" animated :count="beautifulImg.length">
                <!-- 当没有图片的时候显示这个 -->
                <template #template>
                    <el-skeleton-item variant="image" style="width: 400px; height: 267px" />
                    <div style="padding: 14px">
                    <el-skeleton-item variant="h3" style="width: 50%" />
                    <div
                        style="
                        display: flex;
                        align-items: center;
                        justify-items: space-between;
                        margin-top: 16px;
                        height: 16px;
                        "
                    >
                        <el-skeleton-item variant="text" style="margin-right: 16px" />
                        <el-skeleton-item variant="text" style="width: 30%" />
                    </div>
                    </div>
                </template>
                <!-- /图片 -->
                <template #default>
                    <el-card
                        v-for="item in beautifulImg"
                        :key="item.id"
                        class="Card"
                        :body-style="{ padding: '0px', marginBottom: '1px' }"
                    >
                        <img :src="item.img" class="image multi-content" />
                        <div class="Card_one">
                            <span class="name">{{ item.name }}</span>
                            <div class="bottom card-header">
                            <span class="time">{{ currentDate }}</span>
                            <el-button type="text" class="button">Operation button</el-button>
                            </div>
                        </div>
                    </el-card>
                </template>
            </el-skeleton>
    </el-space>
    <div>
        <el-backtop :bottom="300" class="back">
            <div>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="36" height="36"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 12v8h-2v-8H4l8-8 8 8z" fill="rgba(149,164,166,1)"/></svg>
            </div>
        </el-backtop>
    </div>
</template>
<script>
import Finger from '@/components/LoginZi/Finger.vue'
import { computed, reactive, ref, toRefs } from 'vue'
import {Beautiful} from '@/api/beautiful.js'
export default {
    components:{Finger},
    setup(){
        const loading = ref(false)
        const lists = reactive({
            beautifulImg:[]
        })
        const currentDate = ref()

        // 格式时间
        const Timer = computed(()=>{
            var d = new Date();
            var year = d.getFullYear(); //年
            var month = d.getMonth()+1; //月
            var day = d.getDate();  //日
            var timer = year+'/'+month+'/'+day
            return timer
        })
        currentDate.value = Timer.value
        // 点击显示 或者 隐藏
        const setLoading = ()=>{
            loading.value = !loading.value
        }

        Beautiful().then((res)=>{
            console.log(res.data);
            lists.beautifulImg = res.data
        }).catch((err)=>{
            console.log(err.message);
        })


        return{
            loading,
            setLoading,
            ...toRefs(lists),
            currentDate
        }
    }
}
</script>
<style lang="less" scoped>
    .con_one{
        width: 1000px;
        height: auto;
        position: relative;
        left: 25%;
        right: 25%;
        transform: translateX(-25%,-25%);
        top: 35px;
        .Card{
            margin-bottom: 20px;
            position: relative;
            .image{
                width: 100%;
            }
            .Card_one{
                padding: 20px;
                .name{
                    color: rgb(88, 88, 88);
                    position: absolute;
                    right: 50%;
                    left: 50%;
                    bottom: 15px;
                    transform: translateX(-50%);
                    width: 300px;
                    text-align: center;
                    font-size: 20px;
                    height: 30px;
                    letter-spacing: 5px;
                }
                .time{
                    font-size: 15px;
                }
                .button{
                    position: absolute;
                    right: 25px;
                    bottom: 10px;
                }
            }
            
        }
    }
    .back{
        width: 50px;
        height: 50px;
    }
</style>
